<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>分析生命周期(新)</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>

		<script type="text/babel">
			//生命周期回调函数 <=> 生命周期函数 <=> 生命周期钩子
			//定义组件
			class Demo extends React.Component{
				constructor(){
					console.log('---constructor---')
					super()
					this.state = {sum:0} //初始化状态
				}

				//组件将要挂载 ------ 只执行一次
				UNSAFE_componentWillMount(){
					console.log('---componentWillMount---')
				}

				render(){
					console.log('---render---')
					return (
						<div>	
							<h1>当前求和为：{this.state.sum}</h1>
							<button onClick={this.add}>+</button>
							<button onClick={this.qiang}>点我强制更新</button>
						</div>
					)
				}

				//组件挂在完毕 ----- 只执行一次
				componentDidMount(){
					console.log('---componentDidMount---')
				}

				//控制组件更新的“阀门”
				shouldComponentUpdate(){
					console.log('---shouldComponentUpdate---')
					return true
				}

				//组件将要更新
				UNSAFE_componentWillUpdate(){
					console.log('---componentWillUpdate---')
				}

				//组件完成更新
				componentDidUpdate(){
					console.log('---componentDidUpdate---')
				}
				
				UNSAFE_componentWillReceiveProps(){

				}

				componentWillUnmount(){
					
				}

				//事件的回调--程序员根据业务逻辑写的
				add = ()=>{
					const {sum} = this.state //获取原状态
					this.setState({sum:sum+1}) //更新状态
				}
				
				//强制更新按钮的回调
				qiang = ()=>{
					this.forceUpdate()
				}
			}

			//渲染组件
			ReactDOM.render(<Demo/>,document.getElementById('test'))
		</script>
	</body>
</html>